<!-- 竖版多个医生 -->
<template>
    <div class="one_el_container" :style="{ backgroundColor: colorConfig.backgroundColor, color: colorConfig.textColor }">
        <div class="one_el-header" style="padding:0px;">
            <div class="one_header_title">{{ showTitle }}
                <!-- {{ deptName }} <span>{{ roomName }}</span> -->
            </div>
            <div style="width: 100%;height: 100%;clear: both;">
                <div class="one_header_logo">
                    <img :src="logoUrl" class="icon" />                    
                </div>
                <!-- <div class="one_header_logo_title">清镇市第一人民医院</div> -->
                <div class="one_header_date">
                    <div>{{ timeStr }}</div>
                    <div class="time">{{ dateStr }}</div>
                </div>
            </div>
        </div>
        <div class="one_el-main" style="padding:0px;">
            <div class="one_main_container">
                <div class="one_doctor_main_container">
                    <div class="one_top_container" v-for="(item, index) in content" :key="index">
                        <div class="one_top_root  box" :style="{ backgroundColor: colorConfig.contentBackgroudColor }">
                            <div style="width:100%;height: 86%;clear: both;">
                                <div class="one_top_root_left">
                                    <img width="100%" height="80%" src="../assets/doctor_header.jpg" />
                                    <div class="right_title">{{ item.doctorName ? item.doctorName : "" }}</div>
                                    <div class="right_title">{{ item.doctorPositional ? item.doctorPositional : "" }}
                                    </div>
                                </div>
                                <div class="one_top_root_right">
                                    <div class="one_right_detail">
                                        {{ item.doctorIntro ? item.doctorIntro : "" }}
                                    </div>
                                </div>
                            </div>
                            <div class="top_bottom">正在就诊:<span>{{ item.curPatientName ? item.curPatientName : ""
                            }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="one_center_container">
                    <div class="one_center_main box" :style="{ backgroundColor: colorConfig.contentBackgroudColor }">
                        <div class="one_r_col">准备就诊</div>
                        <div class="one_ready_center_table">
                            <table class="one_ready_table">
                            </table>
                        </div>
                    </div>
                </div>
                <div class="one_bottom_container">
                    <div class="one_center_main  box" :style="{ backgroundColor: colorConfig.contentBackgroudColor }">
                        <div class="one_r_col">等候就诊</div>
                        <div class="one_wait_center_table">
                            <table class="wait_table">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="one_el-footer">
            <div class='one_divWrap'>
                　　　　<div class='div'>
                    　　　　　　{{ footerTips }}
                    　　　　</div>
                　　</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            logoUrl: "../assets/icon.png",
            timeStr: "",
            dateStr: "",
            content: [],
            readyArr: [],
            waitArr: [],
            colorConfig: {},
            showTitle: "",
            footerTips: ""
        }
    },
    mounted() {
        this.colorConfig = this.GLOBAL.colorConfig;
        const event = new Date();
        const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
        this.dateStr = event.toLocaleDateString(undefined, options);
        this.timeStr = getTimer();
        window.addEventListener("LOGIN_SUCCESS", () => {
            this.colorConfig = this.GLOBAL.colorConfig;
            let device = this.GLOBAL.device;
            if (device.deviceType == 1) {
                this.showTitle = device.areaName;
            } else {
                this.showTitle = device.deptName + "|" + device.roomName;
            }
            if (device && device.logoUrl) {
                this.logoUrl = "http://" + this.GLOBAL.BASE_URL + this.GLOBAL.device.logoUrl;
            }
            if (device.tips) {
                this.footerTips = device.tips;
            }
        });

        //更新医生信息
        window.addEventListener("CURRENT_UPDATE", () => {
            setCurrTable();
        });

        window.addEventListener("WAIT_UPDATE", (res) => {
            setWaitTable();
        });
        let device = this.GLOBAL.device;
        if (device) {
            if (device.deviceType == 1) {
                this.showTitle = device.areaName;
            } else {
                this.showTitle = device.deptName + "|" + device.roomName;
            }
            if (device.logoUrl) {
                this.logoUrl = "http://" + this.GLOBAL.BASE_URL + this.GLOBAL.device.logoUrl;
            }
            if (device.tips) {
                this.footerTips = device.tips;
            }
        }

        let one_doctor_main_container = document.getElementsByClassName("one_doctor_main_container")[0];
        let one_ready_center_table = document.getElementsByClassName("one_ready_center_table")[0];
        let one_wait_center_table = document.getElementsByClassName("one_wait_center_table")[0];
        var topIndex = 0;
        var waitIndex = 0;
        var mIndex = 0;
        setInterval(() => {
            if (one_ready_center_table.scrollTop + one_ready_center_table.clientHeight + 1 >= one_ready_center_table.scrollHeight) {
                topIndex++;
                if (topIndex > 150) {
                    topIndex = 0;
                    one_ready_center_table.scrollTop = 0;
                }
            } else {
                one_ready_center_table.scrollTop += 1;
            }

            if (one_wait_center_table.scrollTop + one_wait_center_table.clientHeight + 1 >= one_wait_center_table.scrollHeight) {
                waitIndex++;
                if (waitIndex > 150) {
                    waitIndex = 0;
                    one_wait_center_table.scrollTop = 0;
                }
            } else {
                one_wait_center_table.scrollTop += 1;
            }
            mIndex++;
            if (mIndex % 60 == 0 && !isAni) {
                animation(one_doctor_main_container);
            }
            this.timeStr = getTimer();
        }, 80);

        let __this = this;
        function setCurrTable() {
            let data = window['queueObject']['contentQueue'];
            var arr = JSON.parse(JSON.stringify(data));
            console.error("CURRENT_UPDATE", arr);
            var vArr = [];
            vArr = arr;
            __this.content = vArr && vArr.length ? vArr : [{}];
            __this.readyArr = [];
            vArr.forEach(value => {
                __this.readyArr.push(value.waitPatientName);
            });
            updateTable(__this.readyArr, "one_ready_table");
        }

        function setWaitTable() {
            let data = window['queueObject']['waitQueue'];
            var arr = JSON.parse(JSON.stringify(data));
            console.error("WAIT_UPDATE", arr);
            let values = [];
            arr.forEach(value => {
                values = values.concat(value.players);
            })
            updateTable(values, "wait_table");
        }

        setCurrTable();
        setWaitTable();
    }

}

var isAni = false;
function animation(el) {
    if (isAni) return;
    let start = el.scrollLeft;
    let end = start + window.innerWidth;
    isAni = true;
    if (start + el.clientWidth + 1 >= el.scrollWidth) {
        //设置为0
        el.scrollLeft = 0;
        isAni = false;
        return;
    }

    let cell = window.innerWidth / 30;
    let aTimer = setInterval(() => {
        start += cell;
        if (start > end) {
            start = end;
            clearInterval(aTimer);
            isAni = false;
        }
        el.scrollLeft = start;
    }, 10);
}

function getTimer() {
    let date = new Date();
    let seconds = date.getSeconds();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)
}

function updateTable(arr, tableName) {
    let table = document.getElementsByClassName(tableName)[0];
    let cellHeight = 50;
    let htmlStr = "";
    let totalHeight = 0;
    for (let i = 0; i < arr.length; i++) {
        var name1 = arr[i];
        var name2 = arr[i + 1] ? arr[i + 1] : "";
        // var name3 = arr[i + 2] ? arr[i + 2] : "";
        if (tableName != 'one_ready_table') {
            name1 = name1.showTitle;
            name2 && (name2 = name2.showTitle);
            // name3 && (name3 = name3.showTitle);
        }
        let color = i % 2 == 0 ? "background-color: rgba(255, 255, 255, 0.1);" : "";
        htmlStr += `<tr style="${color}height:50px;line-height:50px;">
                    <td>${name1}</td>
                    <td>${name2}</td>
                </tr>`;
        totalHeight += cellHeight;
        i += 2;
    }
    table && (table.innerHTML = htmlStr);
}

</script>

<style lang="scss">
.one_el_container {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

.one_el-main {
    text-align: center;
    padding: 0px;
    margin: 0px;
    height: calc(100% - 120px);
    width: 100%;
}

.one_main_container {
    height: 100%;
}

.one_doctor_main_container {
    height: calc(50%);
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    margin: 0px auto;
}

.one_top_container {
    height: calc(100% - 25px);
    min-width: calc(100%);
}

.one_top_root {
    width: calc(100% - 20px);
    height: calc(100%);
    margin: 10px;
    border-radius: 6px;
}

.one_top_root_left {
    width: 40%;
    height: 100%;
    float: left;
    background-color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.right_title {
    font-size: 20px;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.one_top_root_right {
    width: 60%;
    height: 100%;
    float: left;
}



.top_main {
    height: calc(100%);
    border-radius: 8px;
    padding: 5px;
    flex-shrink: 0;
    width: 100%;
}

.top_left {
    width: 50%;
    height: 100%;
    float: left;
}

.top_left .img {
    width: 100%;
    height: 100%;
}

.top_right {
    width: calc(50% - 5px);
    height: 100%;
    float: left;
    overflow: hidden;
    padding-left: 0px;
}



.one_right_detail {
    font-size: 16px;
    text-align: left;
    overflow-x: hidden;
    overflow-y: hidden;
    height: calc(100%);
}

.top_bottom {
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 20px;
    height: 14%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_bottom span {
    font-size: 26px;
    margin-left: 15px;
}

.one_center_container {
    height: calc(20% - 5px);
    width: calc(100%- 20px);
    padding: 5px 10px 5px 10px;
}

.one_center_main {
    border-radius: 8px;
    height: 100%
}

.one_r_col {
    height: 30px;
    font-size: 20px;
    font-weight: bold;
}

.one_ready_center_table,
.one_wait_center_table {
    width: calc(100%);
    height: calc(100% - 35px);
    font-size: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

tr {
    height: 35px;
}

.one_ready_table tr {
    height: 30px;
}

.one_bottom_container {
    height: calc(30% - 20px);
    padding: 5px 10px 0px 10px;
}


.one_el-header,
.one_el-footer {
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 25px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0px;
    padding: 0px;
}


.one_header_logo {
    font-size: 20px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    float: left;
}

.one_header_logo_title{
    float: left;
    margin-left: 5px;
}


.one_header_logo .icon {
    height: 50px;
    width: 50px;
    text-align: right;
    vertical-align: middle;
}

.one_header_title {
    font-size: 30px;
    width: calc(100%);
    height: 60px;
    line-height: 60px;
    position: absolute;
    top: 0px;
    text-align: center;
    padding-right: 0px;
    font-weight: bold;
}

.one_header_title span {
    font-size: 28px;
}

.one_header_date {
    // background-color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    width: 200px;
    min-width: 200px;
    height: 60px;
    line-height: 60px;
    float: right;
    text-align: right;
    padding-right: 5px;
}

.one_header_date div {
    height: 30px;
    line-height: 30px;
    padding-right: 2px;
    font-size: 30px;
    padding-top: 5px;
}

.one_header_date .time {
    font-size: 11px;
    height: 20px;
    padding-top: 0px;
}

.one_divWrap {
    width: calc(100%); //(宽度)
    overflow: hidden; //（超出隐藏）
}

.div {
    display: inline-block;
    white-space: nowrap;
    animation: 10s div linear infinite normal;
}

//根据自己情况调节，
@keyframes div {
    //起始位置
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    //终点位置
    100% {
        transform: translateX(-150%);
        -webkit-transform: translateX(-150%);
    }
}

//划过暂停
// .div:hover {
//     display: inline-block;
//     white-space: nowrap;
//     animation: 10s div linear infinite normal paused;
// }

</style>